<template>
    <div class="container">
        <!-- 面包屑 -->
        <div class="top-bread">
            <el-breadcrumb separator="/" style="padding-top: 10px;padding-left: 5px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/user">用户管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- /面包屑 -->
        <!-- 内容主体 -->
        <div class="main-body">
            <div class="body">
                <!-- 顶部操作栏 -->
                <div class="top-operation">
                    <div class="operation">
                        <el-button type="danger" @click="deleteRow()">批量删除</el-button>
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">
                            新增用户
                        </el-button>
                        <el-input v-model="input" placeholder="请输入内容"
                                  style="margin-left: 20px; width: 200px;"></el-input>
                        <el-button icon="el-icon-search" style="margin-left: 10px;" @click="selectUser()">查询</el-button>
                    </div>
                </div>
                <!-- /顶部操作栏 -->
                <!-- 表格主体 -->
                <div class="table-body">
                    <template>
                        <el-table border @selection-change="handleSelectionChange"
                                  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                                  style="width: 100%;margin-top: 20px;">
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column prop="id" label="用户id" width="80px" align="center"></el-table-column>
                            <el-table-column prop="username" label="用户名称" width="200px"
                                             align="center"></el-table-column>
                            <el-table-column prop="password" label="用户密码" width="180px"
                                             align="center"></el-table-column>
                            <el-table-column prop="phone" label="用户电话" width="180px" align="center"></el-table-column>
                            <el-table-column prop="email" label="用户邮箱" width="180px" align="center"></el-table-column>
                            <el-table-column prop="address" label="用户地址" width="180px" align="center"></el-table-column>
                            <el-table-column prop="roleId" label="用户权限" width="120px" align="center"
                                             :formatter="stateFormat"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <!-- /表格主体 -->
                <div style="margin-left: 30px">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- /内容主体 -->
        <!--添加页面-->
        <el-dialog title="输入信息" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="用户名称：" :label-width="formLabelWidth">
                    <el-input v-model="User.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码：" :label-width="formLabelWidth">
                    <el-input v-model="User.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户电话：" :label-width="formLabelWidth">
                    <el-input v-model="User.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱：" :label-width="formLabelWidth">
                    <el-input v-model="User.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户地址：" :label-width="formLabelWidth">
                    <el-input v-model="User.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户权限：" :label-width="formLabelWidth">
                    <el-select v-model="User.roleId" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser()">添 加</el-button>
            </div>
        </el-dialog>
        <!--修改信息界面-->
        <el-dialog title="修改信息" :visible.sync="updateFormVisible">
            <el-form>
                <el-form-item label="用户名称：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户电话：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户地址：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户权限：" :label-width="formLabelWidth">
                    <el-select v-model="Inform.roleId" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUser()">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'User',
        data() {
            return {
                options: [{
                    value: '1',
                    label: '管理员',
                }, {
                    value: '2',
                    label: '普通用户',
                }],
                dialogFormVisible: false,//添加页面
                updateFormVisible: false,//修改页面
                formLabelWidth: '100px',
                input: '', // 搜索内容
                currentPage: 1, //初始页
                pageSize: 5,    //每页的数据
                User: {},  //添加中转站
                Inform: {},//查询的单个存储
                tableData: [{}],
                delarr: [],//存放删除的数据
                multipleSelection: [],//多选的数据
            };
        },
        methods: {
            stateFormat(row, column) {
                if (row.roleId == 1) {
                    return '管理员'
                } else if (row.roleId == 2) {
                    return '普通用户'
                }
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            /*模糊查询*/
            selectUser() {
                let _this = this
                if (this.input == '') {
                    location.reload()
                    return false;
                }
                this.$axios.post("http://localhost:8088/user/selectUser/" + this.input).then(function (res) {
                    _this.tableData = res.data
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
            /*查询所有角色*/
            findAll() {
                let _this = this
                this.$axios.get("http://localhost:8088/user/getUser").then(function (res) {
                    _this.tableData = res.data
                    console.log(_this.tableData)
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
            /*添加角色*/
            addUser() {
                if (!this.User.username) {alert('请输入用户名称');return false}
                if (!this.User.password) {alert('请输入用户密码');return false}
                if (!this.User.phone) {alert('请输入用户电话');return false}
                if (!this.User.email) {alert('请输入用户邮箱');return false}
                if (!this.User.address) {alert('请输入用户地址');return false}
                if (!this.User.roleId) {alert('请选择用户权限');return false}
                console.log(this.Role)
                let _this = this
                this.$axios.post("http://localhost:8088/user/setUser", this.User).then(function () {
                    //清空本次保存数据
                    _this.$message({
                        showClose: true,
                        message: '角色信息添加成功!',
                        type: 'success'
                    });
                    _this.Role = {};
                    _this.dialogFormVisible = false
                    _this.findAll();
                }).catch(function (err) {
                    _this.$message({
                        showClose: true,
                        message: '角色信息添加失败!',
                        type: 'error'
                    });
                })
            },
            /*根据id查询角色*/
            handleEdit(id) {
                this.updateFormVisible = true
                let _this = this
                this.$axios.get("http://localhost:8088/user/getUserById/" + id).then(function (res) {
                    _this.Inform = res.data
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
            /*更新角色*/
            updateUser() {
                let _this = this
                // 发送axios请求，根据查询一个
                this.$axios.post("http://localhost:8088/user/updateUser", _this.Inform).then(function (res) {
                    _this.$message({
                        showClose: true,
                        message: '角色信息修改成功!',
                        type: 'success'
                    });
                    _this.updateFormVisible = false
                    _this.findAll();
                }).catch(function (err) {
                    _this.$message({
                        showClose: true,
                        message: '角色信息修改失败!请联系管理员！',
                        type: 'error'
                    });
                })
            },
            /*删除角色*/
            handleDelete(id) {
                let _this = this
                if (window.confirm('确定要删除角色吗？')) {
                    // 发送axios请求，根据查询一个
                    alert(id)
                    this.$axios.post("http://localhost:8088/user/deletedById/" + id).then(function () {
                        _this.findAll();
                        _this.$message({
                            showClose: true,
                            message: '角色删除成功!',
                            type: 'success'
                        });
                    }).catch(function (err) {
                        _this.$message({
                            showClose: true,
                            message: '角色删除失败!请联系管理员！',
                            type: 'error'
                        });
                    })
                }
            },
            /*操作多选*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /*批量删除*/
            deleteRow() {
                let _this = this
                const length = this.multipleSelection.length;
                if (length <= 0) {
                    alert("请勾选需要删除的选项！")
                    return false;
                }
                for (let i = 0; i < length; i++) {
                    this.delarr.push(this.multipleSelection[i].id)
                }
                this.$axios.post('http://localhost:8088/user/deletedAllById', this.delarr).then(function (res) {
                    _this.$message({
                        showClose: true,
                        message: '批量删除角色成功!',
                        type: 'success'
                    });
                    setTimeout('location.reload()', 1000);
                }).catch(function (err) {
                    _this.$message({
                        showClose: true,
                        message: '删除失败！请联系管理员！',
                        type: 'error'
                    });
                })
            },
        },
        mounted() {
            this.findAll()
        },
    };
</script>

<style scoped>
    .top-bread {
        width: 100%;
        height: 30px;
        background-color: #efeef0;
    }

    .main-body {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 750px;
    }

    .body {
        width: 90%;
        height: 750px;
        background-color: #ffffff;
    }

    .top-operation {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
    }

    .operation {
        margin-top: 10px;
        margin-left: 50px;
        display: flex;
        align-items: center;
    }

    .table-body {
        margin: auto;
        width: 95%;
        height: 400px;
    }
</style>
